<template>
	<view class="content">
		
		<view v-if="userInfo && collectData.length>0">
			<view class="l-fixed">
				<!-- #ifndef MP-WEIXIN -->
				<view class="l-status"></view>
				<!-- #endif -->
				<!-- l-head -->
				<view class="l-head">
					<view class="l-search">
						<image class="l-icon-search" src="../../static/l-icon-search.png" mode=""></image>
						<input type="text" class="l-search-input" v-model="search_value" placeholder="精彩热搜：金光布袋戏《羽国志异》"
							placeholder-class="l-holder" />
					</view>
					<button style="background-color: #007AFF;height: 60rpx;line-height: 60rpx;font-size: 20rpx;width: 75rpx;" @tap="search_book()">搜索</button>
				</view>
			</view>
			
			<view class="l-placeholder"></view>
			
			<view class="l-body l-clear-both">
				<view class="l-li"v-for="(book,i) in collectData" :key="i"  @tap="navtoDetail(book.Id)" >
					<image class="l-li-img" :src="book.photo" mode="aspectFill"></image>
					<view class="l-li-txt">
						{{book.title}}
					</view>
				</view>
				<view class="l-add"  @tap="navtoBookmall">
					<view class="l-add-view">
						<image url="/pages/bookrack/bookrack" class="l-icon-add" src="../../static/l-icon-add.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view style="text-align: center;padding-top: 65%;" v-if="userInfo && collectData.length==0">
			<view style="font-size: 30rpx;color: #CDCED0;">这里的世界一片荒芜。。。</view>
			<button style="font-size: 35rpx;border: 1px solid #007AFF;color: #007AFF;width: 80%;margin-left: 10%;border-radius: 50px;height: 70rpx;line-height: 65rpx;margin-top: 30rpx;">
				去知识的海洋中找寻你的食粮
			</button>
		</view>
		
		<view style="text-align: center;padding-top: 65%;" v-if="Boolean(userInfo)==false">
			<view style="font-size: 30rpx;color: #CDCED0;">您尚未登录。。。</view>
			<button @tap="login()" style="font-size: 35rpx;border: 1px solid #007AFF;color: #007AFF;width: 80%;margin-left: 10%;border-radius: 50px;height: 70rpx;line-height: 65rpx;margin-top: 30rpx;">
				现 在 去 登 录
			</button>
		</view>
	</view>
</template>

<script>
	import { getCollect,searchBook,searchCollectBook } from "../../utils/api.js"
	import { getStore } from "../../store/store.js"
	export default {
		data() {
			return {
				collectData: [],
				search_value: '',
				userInfo: false
			}
		},
		onShow() {
			this.userInfo = getStore("userInfo")
			this.getNew();
		},
		methods: {
			login(){
				uni.navigateTo({
					url: "../login/login"
				})
			},
			getNew(){
				const Collect = getStore("Collect")
				if (Boolean(Collect) == true){
					this.collectData = Collect
				}else{
					getCollect((data)=>{
						if (data){
							this.collectData = data
						}
					});
				}
			},
			navtoBookmall() {
				uni.switchTab({
					url: `/pages/book-mall/book-mall`
				})
			},
			search_book() {
				if ( this.search_value == '' ){
					uni.showToast({
						title: '搜索内容不能为空!',
						icon: 'none'
					})
					return;
				}
				searchCollectBook(this.search_value, (data)=>{
					this.collectData = [];
					for (var i = 0; i < data.data.length; i++) {
						this.collectData.push(data.data[i]);
					}
				})
			},
			navtoDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?bookid='+id
				})
			}
		}
	}
</script>

<style>
	/* l-body */

	.l-head{
		margin-top: 15rpx;
	}

	.l-body {
		padding: var(--pad-lr) 0 var(--pad-lr) var(--pad-lr);
	}

	.l-ul {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 32rpx;
	}

	.l-add,
	.l-li {
		width: 28%;
		float: left;
		height: 392rpx;
		margin-right: 5%;
		margin-bottom: 32rpx;
	}

	.l-li {
		text-align: center;
	}

	.l-add-view,
	.l-li-img {
		width: 100%;
		height: 300rpx;
		border-radius: 10rpx;
		margin-bottom: 8rpx;
	}

	.l-add-view {
		box-sizing: border-box;
		display: flex;
		border: 6rpx solid rgba(126, 127, 148, 1);
		align-items: center;
		justify-content: center;
	}

	.l-icon-add {
		width: 36rpx;
		height: 36rpx;
	}

	.l-li-txt {
		padding: 0 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>
